import * as echarts from '../../ec-canvas/echarts.common.min';

const app = getApp();
// 表一
function initChart(chart) {
  // const chart = echarts.init(canvas, null, {
  //   width: width,
  //   height: height
  // });
  // canvas.setChart(chart);

  var option = {
    // 设置背景颜色
    backgroundColor: "#333333",
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    // 设置标题
    // title: {
    //   text: 'MBI',
    //   textStyle: { //设置主标题风格
    //     color: '#818181',//设置主标题字体颜色
    //     fontSize: 16
    //   },
    //   left: 'center',
    // },
    tooltip: {
      // trigger: 'axis'
    },
    legend: {

      // data: ['A商品', 'B商品', 'C商品']
    },

    grid: {
      // 刻度标签
      containLabel: false
    },

    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: wx.getStorageSync("database").time,

        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#818181'
          }
        }
      },

    ],
    yAxis: [
      {
        type: 'value',
        show: false,
        scale: true,
        // splitNumber: 1,
        // min: '40',
        // max: '100'
      }
    ],
    series: [{
      // name: 'A商品',
      type: 'line',
      smooth: true,
      data: wx.getStorageSync("database").data,
      symbolSize: 8,
      label: {
        normal: {
          show: true,
          color: "#fff"
        }
      },
      itemStyle: {
        normal: {
          lineStyle: {
            color: "#fff"
          },
          color: "#fff",

        }
      }
    },
    ]
  };

  chart.setOption(option);
  return chart;
}
//表二
function initChart2(chart) {
  // const chart = echarts.init(canvas, null, {
  //   width: width,
  //   height: height
  // });
  // canvas.setChart(chart);

  var option = {
    // 设置背景颜色
    backgroundColor: "#fff",
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    // 设置标题
    // title: {
    //   text: '体重kg',
    //   textStyle: { //设置主标题风格
    //     color: '#818181',//设置主标题字体颜色
    //     fontSize: 16
    //   },
    //   left: 'center',
    // },
    tooltip: {
      // trigger: 'axis'
    },
    legend: {

      // data: ['A商品', 'B商品', 'C商品']
    },

    grid: {
      // 刻度标签
      containLabel: false
    },

    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: wx.getStorageSync("database2").time,

        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#818181'
          }
        }
      },

    ],
    yAxis: [
      {
        type:'value',
        show: false,
        scale: true,
        // splitNumber: 1,
        // min: '40',
        // max: '100'
      }
    ],
    series: [{
      // name: 'A商品',
      type: 'line',
      smooth: true,
      data: wx.getStorageSync("database2").data,
      symbolSize: 8,
      label: {
        normal: {
          show: true,
          color: "#000"
        }
      },
      itemStyle: {
        normal: {
          lineStyle: {
            color: "#CA151D"
          },
          color: "#CA151D",

        }
      }
    },
    ]
  };

  chart.setOption(option);
  return chart;
}
//表三
function initChart3(chart) {
  // const chart = echarts.init(canvas, null, {
  //   width: width,
  //   height: height
  // });
  // canvas.setChart(chart);

  var option = {
    // 设置背景颜色
    backgroundColor: "#fff",
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    // 设置标题
    // title: {
    //   text: '体重kg',
    //   textStyle: { //设置主标题风格
    //     color: '#818181',//设置主标题字体颜色
    //     fontSize: 16
    //   },
    //   left: 'center',
    // },
    tooltip: {
      // trigger: 'axis'
    },
    legend: {

      // data: ['A商品', 'B商品', 'C商品']
    },

    grid: {
      // 刻度标签
      containLabel: false
    },

    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: wx.getStorageSync("database3").time,

        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#818181'
          }
        }
      },

    ],
    yAxis: [
      {
        type: 'value',
        show: false,
        scale: true,
        // splitNumber: 1,
        // min: '40',
        // max: '100'
      }
    ],
    series: [{
      // name: 'A商品',
      type: 'line',
      smooth: true,
      data: wx.getStorageSync("database3").data,
      symbolSize: 8,
      label: {
        normal: {
          show: true,
          color: "#000"
        }
      },
      itemStyle: {
        normal: {
          lineStyle: {
            color: "#CA151D"
          },
          color: "#CA151D",

        }
      }
    },
    ]
  };

  chart.setOption(option);
  return chart;
}
//表四
function initChart4(chart) {
  // const chart = echarts.init(canvas, null, {
  //   width: width,
  //   height: height
  // });
  // canvas.setChart(chart);

  var option = {
    // 设置背景颜色
    backgroundColor: "#fff",
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    // 设置标题
    // title: {
    //   text: '体重kg',
    //   textStyle: { //设置主标题风格
    //     color: '#818181',//设置主标题字体颜色
    //     fontSize: 16
    //   },
    //   left: 'center',
    // },
    tooltip: {
      // trigger: 'axis'
    },
    legend: {

      // data: ['A商品', 'B商品', 'C商品']
    },

    grid: {
      // 刻度标签
      containLabel: false
    },

    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: wx.getStorageSync("database4").time,

        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#818181'
          }
        }
      },

    ],
    yAxis: [
      {
        type: 'value',
        show: false,
        scale: true,
        // splitNumber: 1,
        // min: '40',
        // max: '100'
      }
    ],
    series: [{
      // name: 'A商品',
      type: 'line',
      smooth: true,
      data: wx.getStorageSync("database4").data,
      symbolSize: 8,
      label: {
        normal: {
          show: true,
          color: "#000"
        }
      },
      itemStyle: {
        normal: {
          lineStyle: {
            color: "#CA151D"
          },
          color: "#CA151D",

        }
      }
    },
    ]
  };
  chart.setOption(option);
  return chart;
}
//表五
function initChart5(chart) {
  // const chart = echarts.init(canvas, null, {
  //   width: width,
  //   height: height
  // });
  // canvas.setChart(chart);

  var option = {
    // 设置背景颜色
    backgroundColor: "#fff",
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    // 设置标题
    // title: {
    //   text: '体重kg',
    //   textStyle: { //设置主标题风格
    //     color: '#818181',//设置主标题字体颜色
    //     fontSize: 16
    //   },
    //   left: 'center',
    // },
    tooltip: {
      // trigger: 'axis'
    },
    legend: {

      // data: ['A商品', 'B商品', 'C商品']
    },

    grid: {
      // 刻度标签
      containLabel: false
    },

    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: wx.getStorageSync("database5").time,

        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#818181'
          }
        }
      },

    ],
    yAxis: [
      {
        type: 'value',
        show: false,
        scale: true,
        // splitNumber: 1,
        // min: '40',
        // max: '100'
      }
    ],
    series: [{
      // name: 'A商品',
      type: 'line',
      smooth: true,
      data: wx.getStorageSync("database5").data,
      symbolSize: 8,
      label: {
        normal: {
          show: true,
          color: "#000"
        }
      },
      itemStyle: {
        normal: {
          lineStyle: {
            color: "#CA151D"
          },
          color: "#CA151D",

        }
      }
    },
    ]
  };
  chart.setOption(option);
  return chart;
}
//表六
function initChart6(chart) {
  // const chart = echarts.init(canvas, null, {
  //   width: width,
  //   height: height
  // });
  // canvas.setChart(chart);

  var option = {
    // 设置背景颜色
    backgroundColor: "#fff",
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    // 设置标题
    // title: {
    //   text: '体重kg',
    //   textStyle: { //设置主标题风格
    //     color: '#818181',//设置主标题字体颜色
    //     fontSize: 16
    //   },
    //   left: 'center',
    // },
    tooltip: {
      // trigger: 'axis'
    },
    legend: {

      // data: ['A商品', 'B商品', 'C商品']
    },

    grid: {
      // 刻度标签
      containLabel: false
    },

    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: wx.getStorageSync("database6").time,

        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#818181'
          }
        }
      },

    ],
    yAxis: [
      {
        type: 'value',
        show: false,
        scale: true,
        // splitNumber: 1,
        // min: '40',
        // max: '100'
      }
    ],
    series: [{
      // name: 'A商品',
      type: 'line',
      smooth: true,
      data: wx.getStorageSync("database6").data,
      symbolSize: 8,
      label: {
        normal: {
          show: true,
          color: "#000"
        }
      },
      itemStyle: {
        normal: {
          lineStyle: {
            color: "#CA151D"
          },
          color: "#CA151D",

        }
      }
    },
    ]
  };
  chart.setOption(option);
  return chart;
}
Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
   data: {
    // show: wx.getStorageSync('database').data.length !=0 ?true:false,
    // show2: wx.getStorageSync('database2').data.length != 0 ? true : false, //true为显示记录按钮，隐藏直线图
    // show3: wx.getStorageSync('database3').data.length != 0 ? true : false,
    // show4: wx.getStorageSync('database4').data.length != 0 ? true : false,
    // show5: wx.getStorageSync('database5').data.length != 0 ? true : false,
    // show6: wx.getStorageSync('database6').data.length != 0 ? true : false,
    ipt1: true,//true为显示记录按钮，隐藏输入框
    ipt2: true,
    ipt3: true,
    ipt4: true,
    ipt5: true,
    ipt6: true,
    value:'',
    value2: '',
    value3: '',
    value4: '',
    value5: '',
    value6: '',
    ec1: {
      // onInit: initChart1
      lazyLoad: true 
    },
    ec2:{
      // onInit: initChart2
      lazyLoad: true 
    },
    ec3: {
      // onInit: initChart3,
      lazyLoad: true 
    },
    ec4: {
      // onInit: initChart4
      lazyLoad: true 
    },
    ec5: {
      // onInit: initChart5
      lazyLoad: true 
    },
    ec6: {
      // onInit: initChart6,
      lazyLoad: true 
       
    },
    // modal: true,
    // isLoaded: true,
    // isDisposed: false
    
  },
  show:function(e){
    let that =this;
    var id =e.currentTarget.dataset.id;
    this.setData({
      hide: true
    })
    switch(id){
      case '0':
      that.setData({
        ipt1: false
      });
      break;
      case '1':
      that.setData({
        ipt2:false
      });
      break;
      case '2':
        that.setData({
          ipt3: false
        });
      break;
      case '3':
        that.setData({
          ipt4: false
        });
      break;
      case '4':
        that.setData({
          ipt5: false
        });
        break;
      case '5':
        that.setData({
          ipt6: false
        });
        break;
      default:
    }
  },
  cancel:function(e){
    let that =this;
    this.setData({
      hide: false
    })
    var id = e.currentTarget.dataset.id;
    switch(id){
      case '0':
      that.setData({
        ipt1:false
      })
      break;
      case '1':
        that.setData({
          ipt2: true
        })
      break;
      case '2':
        that.setData({
          ipt3: true
        })
      break;
      case '3':
        that.setData({
          ipt4: true
        })
      break;
      case '4':
        that.setData({
          ipt5: true
        })
        break;
      case '5':
        that.setData({
          ipt6: true,
        })
        break;
    }
  },
  all:function(data,value,show,num){
    var that=this;
    var date =new Date();
    var mon =date.getMonth();
    var day =date.getDate()
    if(mon.toString().length==1){
      mon='0'+mon;
    }
    if (day.toString().length == 1) {
      day = '0' + day;
    }
    var time =mon+'-'+day;
    var database =wx.getStorageSync(data)
    // console.log(database)
    var len =database.data.length;
   
    wx.request({
      url: app.data.url +'/get_target',
      header:app.getHeader(),
      method:"POST",
      data:{
        type:num,
        number:value
      },
      success:function(res){
        if(res.data==1){
            
            that.upload()
        }else{
          wx.showModal({
            title: '错误',
            content: '记录失败',
          })
        }
      }
    })
  },
  submit:function(e){
    let that =this;
    let id =e.currentTarget.dataset.id;
    this.setData({
      hide: false
    })
      switch (id) {
        case '0':
          that.setData({
            ipt1: true
          })
          var value = that.data.value;
          that.all("database",value,"show")
          break;
        case '1':
          var value = that.data.value2;
          if (!value) {
            return false
          }
          that.all("database2",value,"show2",2)
          that.setData({
            ipt2: true
          })
          break;
        case '2':
          var value = that.data.value3;
          if (!value) {
            return false
          }
          that.all("database3", value, "show3",3)
          that.setData({
            ipt3: true
          })
          break;
        case '3':
          var value = that.data.value4;
          if (!value) {
            return false
          }
          that.all("database4", value, "show4",4)
          that.setData({
            ipt4: true
          })
          break;
        case '4':
          var value = that.data.value5;
          if (!value) {
            return false
          }
          that.all("database5", value, "show5",5)
          that.setData({
            ipt5: true
          })
          break;
        case '5':
          var value = that.data.value6;
          if(!value){
            return false
          }
          that.all("database6", value, "show6",6)
          that.setData({
            ipt6: true,
          })
          break;
      }
    
  },
  input: function (e) {
    let that = this;
    if (e.detail.value != '') {
      that.setData({
        value: e.detail.value
      })
    }
  },
  input2: function (e) {
    let that = this;
    if (e.detail.value != '') {
      that.setData({
        value2: e.detail.value
      })
    }
  },
  input3: function (e) {
    let that = this;
    if (e.detail.value != '') {
      that.setData({
        value3: e.detail.value
      })
    }
  },
  input4: function (e) {
    let that = this;
    if (e.detail.value != '') {
      that.setData({
        value4: e.detail.value
      })
    }
  },
  input5: function (e) {
    let that = this;
    if (e.detail.value != '') {
      that.setData({
        value5: e.detail.value
      })
    }
  },
  input6:function(e){
    let that = this;
    if (e.detail.value!=''){
      that.setData({
        value6: e.detail.value
      })
    }
  },
  onLoad:function(){
    var that =this;
    // 获取组件
    this.ecComponent0 = this.selectComponent('#mychart-dom-line');
    this.ecComponent = this.selectComponent('#mychart-dom-line2');
    this.ecComponent2 = this.selectComponent('#mychart-dom-line3');
    this.ecComponent3 = this.selectComponent('#mychart-dom-line4');
    this.ecComponent4 = this.selectComponent('#mychart-dom-line5');
    this.ecComponent5 = this.selectComponent('#mychart-dom-line6');
  },
  // 多余五条删除前面多余的几条
  splice(data){
    if (data.data.length > 5) {
      data.data.splice(0, data.data.length - 5)
      data.time.splice(0, data.time.length - 5)
    }
  },
  onReady: function () {
    var that =this;
    that.upload();
  },
  upload:function(){
    wx.showNavigationBarLoading()
    var that = this;
    wx.request({
      url: app.data.url + '/user_records',
      method: 'GET',
      header: app.getHeader(),
      success: function (res) {
        // console.log(res.data);
        var mbi =res.data.mbis;
        var sgs = res.data.sgs;
        var tws = res.data.tws;
        var tzs = res.data.tzs;
        var xws = res.data.xws;
        var yws = res.data.yws;
        //mbi
        var mbi_data = {};
        mbi_data.data = [];
        mbi_data.time = [];
        // 胸围
        var sgs_data = {};
        sgs_data.data = [];
        sgs_data.time = [];
        // 腰围
        var tws_data = {};
        tws_data.data = [];
        tws_data.time = [];
        // 臀围
        var tzs_data = {};
        tzs_data.data = [];
        tzs_data.time = [];
        // 身高
        var xws_data = {};
        xws_data.data = [];
        xws_data.time = [];
        // 体重
        var yws_data = {};
        yws_data.data = [];
        yws_data.time = [];
        for (let i in sgs) {
          sgs_data.data.push(sgs[i].sg);
          sgs_data.time.push(sgs[i].record_at.substring(5, 10))
          var len = sgs[i].sg.length;
        }
        for (let i in tws) {
          tws_data.data.push(tws[i].tw);
          tws_data.time.push(tws[i].record_at.substring(5, 10))
        }
        for (let i in tzs) {
          tzs_data.data.push(tzs[i].tz);
          tzs_data.time.push(tzs[i].record_at.substring(5, 10))
        }
        for (let i in xws) {
          xws_data.data.push(xws[i].xw);
          xws_data.time.push(xws[i].record_at.substring(5, 10))
        }
        for (let i in yws) {
          yws_data.data.push(yws[i].yw);
          yws_data.time.push(yws[i].record_at.substring(5, 10))
        }
        for (let i in mbi) {
          mbi_data.data.push(mbi[i].mbi);
          mbi_data.time.push(mbi[i].record_at.substring(5, 10))
        }
        that.splice(mbi_data)
        that.splice(sgs_data)
        that.splice(tws_data)
        that.splice(tzs_data)
        that.splice(xws_data)
        that.splice(yws_data)
        wx.setStorageSync("database", mbi_data);
        wx.setStorageSync("database2", xws_data);
        wx.setStorageSync("database3", yws_data);
        wx.setStorageSync("database4", tws_data);
        wx.setStorageSync("database5", sgs_data);
        wx.setStorageSync("database6", tzs_data);
         that.setData({
           show: wx.getStorageSync('database').data.length != 0 ? true : false,
           show2: wx.getStorageSync('database2').data.length != 0 ? true : false, //true为显示记录按钮，隐藏直线图
           show3: wx.getStorageSync('database3').data.length != 0 ? true : false,
           show4: wx.getStorageSync('database4').data.length != 0 ? true : false,
           show5: wx.getStorageSync('database5').data.length != 0 ? true : false,
           show6: wx.getStorageSync('database6').data.length != 0 ? true : false,
          })
        
      }
    })
    setTimeout(function(){
      that.init(true);
      that.init2(true);
      that.init3(true);
      that.init4(true);
      that.init5(true);
      that.init6(true);
      wx.hideNavigationBarLoading()
    },500)
    
  },
  init: function (bol) {
    var that = this;
    this.ecComponent0.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      initChart(chart);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      that.setData({
        ec2: {
          lazyLoad: false,
          isLoaded: bol,
        },
        ec3: {
          lazyLoad: false,
          // isLoaded: bol,
        }
      });
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  init2: function (bol) {
    var that =this;
    this.ecComponent.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      initChart2(chart);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      that.setData({
        ec2:{
          lazyLoad: false, 
          isLoaded:bol,
        },
        ec3:{
          lazyLoad: false, 
          // isLoaded: bol,
        }
      });
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  init3: function (bol) {
    this.ecComponent2.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      initChart3(chart);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;
      // console.log(this.chart)

      this.setData({
        ec3: {
          isLoaded: false,
        },
      });
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  init4: function (bol) {
    this.ecComponent3.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      initChart4(chart);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;
    

      this.setData({
        ec4: {
          isLoaded: bol,
        },
      });
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  init5: function (bol) {
    this.ecComponent4.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      initChart5(chart);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;


      this.setData({
        ec4: {
          isLoaded: bol,
        },
      });
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  init6: function (bol) {
    this.ecComponent5.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      initChart6(chart);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;
      this.setData({
        ec4: {
          isLoaded: bol,
        },
      });
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
});
